<script>
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	const VERTICAL = 'vertical';
	const HORIZONTAL = 'horizontal';
	export let direction = HORIZONTAL;
	export let progress = 0; // [0-1]
</script>

<div class="container">
	<div
		class="bar"
		style={`
		--progress: ${progress * 100}%;
		--bar-width: ${direction === HORIZONTAL ? '100%' : '1em'};
		--bar-height: ${direction === HORIZONTAL ? '1em' : '100%'};
		--bar-direction: ${direction === HORIZONTAL ? '90deg' : '0deg'};
		`}
		on:click={(e) => {
			dispatch(
				'change',
				direction === HORIZONTAL
					? e.offsetX / e.target.scrollWidth
					: 1 - e.offsetY / e.target.scrollHeight
			);
		}}
	/>
</div>

<style lang="scss">
	.container {
		--progress: 0%;
		--past-color: #c20c0c;
		--future-color: #333;
		--bar-width: 100%;
		--bar-height: 1em;
		--bar-direction: 90deg;
		height: 100%;
		width: 100%;
		cursor: pointer;
		.bar {
			width: var(--bar-width);
			height: var(--bar-height);
			border-radius: 0.5em;
			border: 1px solid var(--future-color);
			background: linear-gradient(
				var(--bar-direction),
				var(--past-color) 0,
				var(--past-color) var(--progress),
				var(--future-color) var(--progress),
				var(--future-color) 100%
			);
		}
	}
</style>
